<template>
    <div class="pageBox">
        <el-pagination v-model:currentPage="pageInfo.pageNo" :page-size="pageInfo.pageSize" background
            layout="total, prev, pager, next, sizes" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script lang="ts" setup>

defineProps(['total', 'pageInfo'])

const emits = defineEmits(['pageSizeChange', 'pageNoChange'])

const handleSizeChange = (val: number) => {
    emits('pageSizeChange', val)
}

const handleCurrentChange = (val: number) => {
    emits('pageNoChange', val)
}
</script>

<style lang="scss" scoped>
.pageBox {
    display: flex;
    justify-content: end;

    :deep .el-pagination {
        padding: 2px 0 2px 5px;

        .el-pagination__sizes {
            margin: 0 0 0 16px;
        }
    }
}
</style>